<!--
 * @Author: wjk
 * @Date: 2020-11-30 10:54:33
 * @LastEditors: wjk
 * @LastEditTime: 2020-12-16 17:07:33
 * @description: file content
-->
<template>
  <view>
    <view v-if="articleList && articleList.length" class="article-list-container">
      <view v-for="(item, index) in articleList" :key="index" class="article-item-box">
        <articleItem ref="articleItem" :from-type="fromType" :is-my-self="isMySelf" class-name="articleItem" :article-data="item" @handleEvent="handleEvent" @refresh="refresh" @initShare="initShare" @click="itemClick" />
      </view>
    </view>
    <view v-if="loading && !nomore" class="loading-tip">-- 加载中 --</view>
    <view v-else-if="!loading && nomore" class="loading-tip">-- 没有更多了 --</view>
  </view>
</template>
<script>
import articleItem from './article-item'
export default {
  components: {
    articleItem
  },
  props: {
    isMySelf: { type: Boolean, default: false }, // 是否是自己的种草
    fromType: {
      type: String,
      default: ''
    },
    articleList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      listQuery: {
        page_size: 10,
        page_no: 1,
        tag_name: '爆款'
      },
      loading: false,
      nomore: false
    }
  },
  created() {
  },
  methods: {
    itemClick(item) {
      console.log('item', item)
    },
    refresh(e) {
      this.$emit('refresh', e)
    },
    handleEvent(e) {
      console.log('e', this.$refs.articleItem)

      this.$emit('handleEvent', e)
      if (e.attention_status) {
        this.articleList.map((item, index) => {
          if (item.user_id === e.user_id && this.$refs.articleItem[index]) {
            this.$refs.articleItem[index].setAttention(e.attention_status)
          }
        })
      }
    },
    initShare(shareOption) {
      this.$emit('initShare', shareOption)
    }
  }
}
</script>
<style lang="scss">
.article-list-container {
  /* display: flex;
  flex-wrap: wrap;
  padding: 20rpx 12rpx;
  justify-content: space-between;
  overflow: hidden; */
  min-height: 1000rpx;
  padding-bottom: 150rpx;
  box-sizing: border-box;
  // background-color: #f5f5f5;
  .article-item-box {
    width: 100%;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    display: inline-block;

    .likeItem,
    goods-item>view{
      background-color: #fff;
    }
  }
}
.loading-tip {
  text-align: center;
  color: #666;
  font-size: 24rpx;
  padding: 10rpx  0;
}
</style>
